<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#box { color:green; }
.red { color:red; }
.blue {
    color:blue;
    background-color:#FFFFFF;
}
</style>
<script>
window.onload = function(){ 
	var styleSheets = document.styleSheets[0];			//获取样式表引用
	var index = styleSheets.length; 					//获取样式表中包含样式的个数
	if(styleSheets.insertRule){ //判断浏览器是否支持insertRule()方法，支持则调用，否则调用addRule
		styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
	}else{										
			styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
	}
	var p = document.getElementsByTagName("p")[0];
	p.innerHTML =  "背 景 色："+p.currentStyle.backgroundColor+"<br>字体颜色："+p.currentStyle.color;
}
</script>
</head>
<body>
<p class="blue">在样式表中增加样式操作</p>
</body>
</html> 
